<template>
    <el-tabs v-model="activeName">
        <!-- 属性设置面板 -->
        <el-tab-pane label="属性设置" name="field">
            <sc-form-table
                ref="fieldTable"
                v-model="fieldList"
                :hideAdd="true"
                :hideDelete="true"
                drag-sort
                placeholder="暂无数据"
            >
                <el-table-column label="主键" prop="primaryPk" width="80" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-checkbox v-model="row.primaryPk" true-label="1" false-label="0" disabled></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="字段名" prop="fieldName" show-overflow-tooltip></el-table-column>
                <el-table-column label="说明" prop="fieldComment" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-input v-model="row.fieldComment" placeholder="请输入说明"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="字段类型" prop="fieldType" show-overflow-tooltip></el-table-column>
                <el-table-column label="属性名" prop="attrName" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-input v-model="row.attrName" placeholder="请输入属性名"></el-input>
                    </template>
                </el-table-column>
                <el-table-column label="属性类型" prop="attrType" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-select v-model="row.attrType" placeholder="请选择属性类型" @change="handleChangeRow(row)">
                            <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="自动填充" prop="autoFill" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-select v-model="row.autoFill" placeholder="请选择类型">
                            <el-option
                                v-for="item in fillList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="字典类型" prop="fieldDict" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-select
                            v-model="row.fieldDict"
                            placeholder="请选择类型"
                            filterable
                            clearable
                            :disabled="row.primaryPk === '1'"
                        >
                            <el-option
                                v-for="item in fieldDictList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
            </sc-form-table>
        </el-tab-pane>
        <!-- 列表设置面板 -->
        <el-tab-pane label="列表查询" name="third">
            <sc-form-table
                ref="gridTable"
                v-model="fieldList"
                :hideAdd="true"
                :hideDelete="true"
                placeholder="暂无数据"
            >
                <el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
                <el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
                <el-table-column label="列表显示" prop="gridItem" width="100" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-checkbox
                            v-model="row.gridItem"
                            true-label="1"
                            false-label="0"
                            :disabled="row.primaryPk === '1'"
                        ></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="是否排序" prop="gridSort" width="100" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-checkbox
                            v-model="row.gridSort"
                            true-label="1"
                            false-label="0"
                            :disabled="row.primaryPk === '1'"
                        ></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="查询显示" prop="gridSort" width="100" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-checkbox
                            v-model="row.queryItem"
                            true-label="1"
                            false-label="0"
                            :disabled="row.primaryPk === '1'"
                        ></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="查询表单类型" prop="queryFormType" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-select
                            v-model="row.queryFormType"
                            placeholder="请选择查询表单类型"
                            :disabled="row.primaryPk === '1'"
                        >
                            <el-option
                                v-for="item in queryTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="查询方式" prop="queryType" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-select
                            v-model="row.queryType"
                            placeholder="请选择查询方式"
                            :disabled="row.primaryPk === '1'"
                        >
                            <el-option
                                v-for="item in queryList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
            </sc-form-table>
        </el-tab-pane>
        <el-tab-pane label="表单页面" name="form">
            <sc-form-table
                ref="formTable"
                v-model="fieldList"
                :hideAdd="true"
                :hideDelete="true"
                placeholder="暂无数据"
            >
                <el-table-column label="属性名" prop="attrName" show-overflow-tooltip></el-table-column>
                <el-table-column label="说明" prop="fieldComment" show-overflow-tooltip></el-table-column>
                <el-table-column label="表单类型" prop="formType" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-select
                            v-model="row.formType"
                            placeholder="请选择表单类型"
                            :disabled="row.primaryPk === '1'"
                        >
                            <el-option
                                v-for="item in formTypeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="是否显示" prop="formItem" width="100" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-checkbox
                            v-model="row.formItem"
                            true-label="1"
                            false-label="0"
                            :disabled="row.primaryPk === '1'"
                        ></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="表单必填" prop="formRequired" width="100" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-checkbox
                            v-model="row.formRequired"
                            true-label="1"
                            false-label="0"
                            :disabled="row.primaryPk === '1'"
                        ></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column label="表单效验" prop="formValidator" show-overflow-tooltip>
                    <template #default="{ row }">
                        <el-select
                            v-model="row.formValidator"
                            placeholder="请选择表单效验"
                            :disabled="row.primaryPk === '1'"
                        >
                            <el-option
                                v-for="item in formValidatorList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </template>
                </el-table-column>
            </sc-form-table>
        </el-tab-pane>
    </el-tabs>
</template>

<script setup lang="ts">
    import { useTableFieldSubmitApi, useTableApi, fetchDictList } from '@/api/gen/table'
    import { list } from '@/api/gen/fieldtype'
    import Sortable from 'sortablejs'

    const scFormTable = defineAsyncComponent(() => import('@/components/FormTable/index.vue'))

    const activeName = ref()
    const tableId = ref('')

    const props = defineProps({
        tableName: {
            type: String
        },
        dsName: {
            type: String
        }
    })

    const visible = ref(false)

    const sortable = ref() as any

    const typeList = ref([]) as any
    const fieldDictList = ref([]) as any
    const dsName = ref()
    const tableName = ref()

    const fieldList = ref([])
    const fillList = reactive([
        { label: 'DEFAULT', value: 'DEFAULT' },
        { label: 'INSERT', value: 'INSERT' },
        { label: 'UPDATE', value: 'UPDATE' },
        { label: 'INSERT_UPDATE', value: 'INSERT_UPDATE' }
    ])

    const queryList = reactive([
        { label: '=', value: '=' },
        { label: '!=', value: '!=' },
        { label: '>', value: '>' },
        { label: '>=', value: '>=' },
        { label: '<', value: '<' },
        { label: '<=', value: '<=' },
        { label: 'like', value: 'like' },
        { label: 'left like', value: 'left like' },
        { label: 'right like', value: 'right like' }
    ])

    const formTypeList = reactive([
        { label: '单行文本', value: 'text' },
        { label: '多行文本', value: 'textarea' },
        { label: '数字', value: 'number' },
        { label: '富文本编辑器', value: 'editor' },
        { label: '下拉框', value: 'select' },
        { label: '单选按钮', value: 'radio' },
        { label: '复选框', value: 'checkbox' },
        { label: '日期', value: 'date' },
        { label: '日期时间', value: 'datetime' },
        { label: '文件上传', value: 'upload-file' },
        { label: '图片上传', value: 'upload-img' }
    ])

    const queryTypeList = reactive([
        { label: '单行文本', value: 'text' },
        { label: '多行文本', value: 'textarea' },
        { label: '数字', value: 'number' },
        { label: '下拉框', value: 'select' },
        { label: '单选按钮', value: 'radio' },
        { label: '复选框', value: 'checkbox' },
        { label: '日期', value: 'date' },
        { label: '日期时间', value: 'datetime' }
    ])

    const formValidatorList = reactive([
        { label: '数字', value: 'number' },
        { label: '字母', value: 'letter' },
        { label: '字母和数字', value: 'letterAndNumber' },
        { label: '手机号码', value: 'mobilePhone' },
        { label: '字母开头，仅可包含数字', value: 'letterStartNumberIncluded' },
        { label: '禁止中文输入', value: 'noChinese' },
        { label: '必须中文输入', value: 'chinese' },
        { label: '电子邮箱', value: 'email' },
        { label: 'URL网址', value: 'url' }
    ])

    const propToType = reactive({
        tinyint: 'number',
        smallint: 'number',
        mediumint: 'number',
        int: 'number',
        integer: 'number',
        bigint: 'number',
        float: 'number',
        datetime: 'datetime',
        LocalDateTime: 'datetime',
        date: 'date',
        LocalDate: 'date',
        Long: 'number',
        Float: 'number',
        Double: 'number',
        BigDecimal: 'number',
        text: 'textarea',
        String: 'text',
        longtext: 'editor',
        bit: 'radio',
        Boolean: 'radio',
        char: 'radio',
        varchar: 'text'
    })

    const handleChangeRow = (row: any) => {
        row.queryFormType = propToType[row.attrType]
        row.formType = propToType[row.attrType]
    }

    const openDialog = (dName: string, tName: string) => {
        visible.value = true
        tableName.value = tName
        dsName.value = dName

        activeName.value = 'field'

        rowDrop()
        getTable(dName, tName)
        getFieldTypeList()
        getDictList()
    }

    onMounted(() => {
        tableName.value = String(props.tableName)
        dsName.value = String(props.dsName)
        activeName.value = 'field'
        rowDrop()
        getTable(dsName.value, tableName.value)
        getFieldTypeList()
        getDictList()
    })

    const rowDrop = () => {
        nextTick(() => {
            const el: any = window.document.querySelector('#pane-field')
            sortable.value = Sortable.create(el, {
                handle: '.drag-btn',
                onEnd: (e: any) => {
                    const { newIndex, oldIndex } = e
                    const currRow = fieldList.value.splice(oldIndex, 1)[0]
                    fieldList.value.splice(newIndex, 0, currRow)
                }
            })
        })
    }
    const loading = ref(false)

    const getTable = (dsName: string, tableName: string) => {
        fieldList.value = [] // 避免第一次数据初始化， 表格显示历史数据
        loading.value = true
        useTableApi(dsName, tableName)
            .then(res => {
                tableId.value = res.data.id
                fieldList.value = res.data.fieldList.map(item => {
                    item.queryFormType ? item.queryFormType : propToType[item.fieldType]
                    item.formType ? item.formType : propToType[item.fieldType]
                    return item
                })
            })
            .finally(() => {
                loading.value = false
            })
    }

    const getFieldTypeList = async () => {
        typeList.value = []
        // 获取数据
        const { data } = await list()
        // 设置属性类型值
        const typeMap = new Map()
        data.forEach((item: any) => {
            const { attrType, columnType } = item
            if (!typeMap.has(attrType)) {
                typeMap.set(attrType, columnType)
                typeList.value.push({ label: attrType, value: attrType })
            }
        })
        // 增加Object类型
        typeList.value.push({ label: 'Object', value: 'Object' })
    }

    const getDictList = () => {
        fetchDictList().then(res => {
            for (const item of res.data) {
                fieldDictList.value.push({ label: item.description, value: item.dictType })
            }
        })
    }

    // 表单提交
    const submitHandle = () => {
        return new Promise(resolve => {
            useTableFieldSubmitApi(dsName.value, tableName.value, fieldList.value).then(() => {
                resolve(tableId.value)
            })
        })
    }

    defineExpose({
        openDialog,
        submitHandle
    })
</script>

<style lang="scss">
    .sortable-row-gen .drag-btn {
        cursor: move;
        font-size: 12px;
    }

    .sortable-row-gen .vxe-body--row.sortable-ghost,
    .sortable-row-gen .vxe-body--row.sortable-chosen {
        background-color: #dfecfb;
    }

    .vxe-select–panel {
        z-index: 9997 !important;
    }
</style>
